<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上扬软件：Bartender 打印服务</title>
    <link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon"/>
    <script th:src="@{/jquery.min.js}"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }

        header {
            background: #50b3a2;
            color: white;
            padding-top: 30px;
            min-height: 70px;
            border-bottom: #e8491d 3px solid;
        }

        header a {
            color: #ffffff;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 16px;
        }

        header ul {
            padding: 0;
            list-style: none;
        }

        header li {
            display: inline;
            padding: 0 20px 0 20px;
        }

        header #branding {
            float: left;
        }

        header #branding h1 {
            margin: 0;
        }

        header nav {
            float: right;
            margin-top: 10px;
        }

        header .highlight, header .current a {
            color: #e8491d;
            font-weight: bold;
        }

        header a:hover {
            color: #ffffff;
            font-weight: bold;
        }

        .banner {
            padding: 80px 0;
            color: white;
            background: url('banner-bg.jpg') no-repeat 0px -110px;
            background-size: cover;
        }

        .banner h1 {
            margin: 0;
            font-size: 55px;
        }

        .banner p {
            font-size: 20px;
        }

        .main-col {
            text-align: center;
            padding: 20px;
            background: white;
        }

        footer {
            background: #50b3a2;
            color: white;
            text-align: center;
            padding: 10px;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
        }

        .button {
            display: inline-block;
            font-size: 16px;
            color: #fff;
            background-color: #50b3a2;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            margin: 10px 5px;
            cursor: pointer;
            text-decoration: none;
        }

        .button:hover {
            background-color: #4a9a8a;
        }

        .json-input {
            width: 100%;
            height: 150px;
            padding: 10px;
            margin: 10px 0;
            font-family: 'Courier New', monospace;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: vertical;
        }
        #loading {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #3498db;
            width: 120px;
            height: 120px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
    <script>
        function checkBartenderInstallation() {
            // 项目请求跟路劲
            let ctxPath = '[[@{/}]]';
            $.get(ctxPath + "bartender/checkBartenderInstalled", {}, function (response) {
                if (response.success) {
                    alert(response.message);
                } else {
                    alert(response.message);
                }
            });
        }

        function testPrint() {
            // 项目请求跟路劲
            let ctxPath = '[[@{/}]]';
            let params = JSON.parse($("#jsonInput").val());
            // 显示加载指示器
            $('#loading').show();
            $.ajax({
                url: ctxPath+"bartender/print",
                type: "post",
                data: JSON.stringify(params),
                contentType:"application/json",
                dataType: "json",
                success: function (response) {
                    if(response.success){
                        alert(response.message);
                    }else{
                        alert(response.message)
                    }
                },
                complete: function() {
                    // 请求完成后隐藏加载指示器
                    $('#loading').hide();
                },
                error: function (xhr) {
                    if (xhr.status === 401) {
                        alert("权限不足，您无法访问受限资源或数据!");
                        return;
                    } else if (xhr.status === 404) {
                        alert("请求url地址错误，请确认后刷新重试!");
                        return;
                    } else if (xhr.status === 419) {
                        alert("长时间未操作，自动刷新后重试!");
                        setTimeout(function () {
                            window.location.reload();
                        }, 2000);
                        return;
                    } else if (xhr.status === 429) {
                        alert("尝试次数太多，请一分钟后再试!");
                        return;
                    } else if (xhr.status === 500) {
                        alert(xhr.responseJSON.msg);
                    } else {
                        alert("请求失败，请确认网络是否正常!");
                    }
                }
            });
        }

        function testAsynchronousPrinting() {
            // 项目请求跟路劲
            let ctxPath = '[[@{/}]]';
            let params = JSON.parse($("#jsonInput").val());
            // 显示加载指示器
            $('#loading').show();
            $.ajax({
                url: ctxPath+"bartender/asynchronousPrinting",
                type: "post",
                data: JSON.stringify(params),
                contentType:"application/json",
                dataType: "json",
                success: function (response) {
                    if(response.success){
                        alert(response.message);
                    }else{
                        alert(response.message)
                    }
                },
                complete: function() {
                    // 请求完成后隐藏加载指示器
                    $('#loading').hide();
                },
                error: function (xhr) {
                    if (xhr.status === 401) {
                        alert("权限不足，您无法访问受限资源或数据!");
                        return;
                    } else if (xhr.status === 404) {
                        alert("请求url地址错误，请确认后刷新重试!");
                        return;
                    } else if (xhr.status === 419) {
                        alert("长时间未操作，自动刷新后重试!");
                        setTimeout(function () {
                            window.location.reload();
                        }, 2000);
                        return;
                    } else if (xhr.status === 429) {
                        alert("尝试次数太多，请一分钟后再试!");
                        return;
                    } else if (xhr.status === 500) {
                        alert(xhr.responseJSON.msg);
                    } else {
                        alert("请求失败，请确认网络是否正常!");
                    }
                }
            });
        }

        function testSingletonPrint() {
            // 项目请求跟路劲
            let ctxPath = '[[@{/}]]';
            let params = JSON.parse($("#jsonInput").val());
            // 显示加载指示器
            $('#loading').show();
            $.ajax({
                url: ctxPath+"bartender/singletonPrint",
                type: "post",
                data: JSON.stringify(params),
                contentType:"application/json",
                dataType: "json",
                success: function (response) {
                    if(response.success){
                        alert(response.message);
                    }else{
                        alert(response.message)
                    }
                },
                complete: function() {
                    // 请求完成后隐藏加载指示器
                    $('#loading').hide();
                },
                error: function (xhr) {
                    if (xhr.status === 401) {
                        alert("权限不足，您无法访问受限资源或数据!");
                        return;
                    } else if (xhr.status === 404) {
                        alert("请求url地址错误，请确认后刷新重试!");
                        return;
                    } else if (xhr.status === 419) {
                        alert("长时间未操作，自动刷新后重试!");
                        setTimeout(function () {
                            window.location.reload();
                        }, 2000);
                        return;
                    } else if (xhr.status === 429) {
                        alert("尝试次数太多，请一分钟后再试!");
                        return;
                    } else if (xhr.status === 500) {
                        alert(xhr.responseJSON.msg);
                    } else {
                        alert("请求失败，请确认网络是否正常!");
                    }
                }
            });
        }
    </script>
</head>
<body>
<header>
    <div class="container">
        <div id="branding">
            <h1>上扬软件：<span class="highlight">Bartender</span> 打印服务</h1>
        </div>
        <nav>
        </nav>
    </div>
</header>

<section class="banner">
    <div class="container">
        <div id="loading">请求中...</div>
        <h1>欢迎来到 Bartender 打印服务</h1>
    </div>
</section>

<section class="main-col">
    <div class="container">
        <h2>测试打印参数</h2>
        <textarea class="json-input" id="jsonInput" style="display: none" placeholder="测试打印参数" readonly>
        {
            "btwName": "LOTID.btw",
            "dataType": 2,
            "path": "D:/btwConfig",
            "embeddedDataList": [{
                    "LOTID": "TESTM01240103G0010011"
                }, {
                    "LOTID": "TESTM01240103G0010012"
                }, {
                    "LOTID": "TESTM01240103G0010013"
                }
            ],
            "numberSerializedLabels": 1,
            "txtName": null,
            "title": null,
            "dataList": null
        }
        </textarea>
        <!-- 添加按钮 -->
        <button class="button" onclick="checkBartenderInstallation()">校验 Bartender 是否安装</button>
        <button class="button" onclick="testPrint()">同步测试打印</button>
        <button class="button" onclick="testSingletonPrint()">同步单实例测试打印</button>
        <button class="button" onclick="testAsynchronousPrinting()">异步测试打印</button>
    </div>
</section>

<footer>
    <p>© 2024 Bartender 打印服务</p>
</footer>
</body>
</html>